<template>
	<view class="consultation-list">
		<headerview :headerText="headerText"></headerview>
		<view class="con-content scrollBar">
			<view>
				<view class="consultation-list-title">等待加入</view>
				<view class="remotec-list">
					<view class="consultation-list-box" v-for="(item, index) in etcList" :key="index">
						<view>{{ item.hospital }}</view>
						<view style="font-size: 11.08px; margin-top: 4.75px;">{{ item.depart }}</view>
						<view class="add-con" @tap="callBtn(item.commonID)">加入会诊</view>
					</view>
				</view>
			</view>
			<view class="remote-list">
				<view class="consultation-list-title">远程会诊列表</view>
				<view class="remote-list">
					<view class="consultation-list-box" v-for="(item, i) in hospitalList" :key="i">
						<view>{{ item.hospitalName }}</view>
						<view style="font-size: 11.08px; margin-top: 4.75px;">{{ item.depart }}</view>
						<view class="add-con2" @click="hujiao(1, item.hospitalID)">立即呼叫</view>
					</view>
					<view class="consultation-list-box" v-for="(item, i) in hospitalList" :key="i">
						<view>{{ item.hospitalName }}</view>
						<view style="font-size: 11.08px; margin-top: 4.75px;">{{ item.depart }}</view>
						<view class="add-con2" @click="hujiao(1, item.hospitalID)">立即呼叫</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="agora-theme">
					   <div class="col s7">
					     <div class="video-grid" id="video">
					       <div class="video-view">
					         <div id="local_stream" class="video-placeholder"></div>
					         <div id="local_video_info" class="video-profile hide"></div>
					         <div id="video_autoplay_local" class="autoplay-fallback hide"></div>
					       </div>
					     </div>
					   </div>
				</view> -->
		<!-- <uni-popup ref="popup1" :mask-click="false">
			<view class="uni-tip1">
				<view class="uni-tip-title1">北京中日友好医院</view>
				<view class="uni-tip-content1">急诊科</view>
				<view style="color:#FFFFFF;font-family:SourceHanSansCN-Regular,SourceHanSansCN; font-size: 14.91px;margin: 28.07px 0 22.8px; text-align: center;">
					正在呼叫…
				</view>
				<view style="color:#FFFFFF;font-family:SourceHanSansCN-Regular,SourceHanSansCN; font-size: 14.03px; text-align: center;">00:35</view>
				<view class="uni-tip-group-button1">
					<button @click="hujiao(2)">挂断</button>
					<button @click="hujiao(3)">电话提醒</button>
					<!-- <image src="../static/image/jieting@2x.png" @tap="jieting"></image>
							<image src="../static/image/guaduan@2x.png"></image> -->
		<!-- 	</view>
			</view>
		</uni-popup> -->
		<agoracom v-on:waitForList="waitForList" ref="agoracom"></agoracom>
	</view>
</template>

<script>
import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
import agoracom from '@/components/agoraComponents.vue';

import headerview from '@/components/headerView.vue';
export default {
	components: {
		uniSegmentedControl,
		uniPopup,
		uniPopupMessage,
		uniPopupDialog,
		agoracom,
		headerview
	},
	data() {
		return {
			headerText: '会诊列表',
			items: ['医生列表', '医院/科室列表'],
			current: 0,
			dType: 1,
			depList: [],
			hospitalList: [],
			doctorList: [],
			active: false,
			client: {},
			RtmMessage: {},
			rtc: {},
			relationPhone: null,
			appId: '',
			//
			rtm: '',
			uid: '',
			destUid: 'test1',
			channelId: '',
			// 等待列表
			etcList: [],
			// 等待列表id
			etcListIds: []
		};
	},
	beforeCreate() {
		let _this = this;
		this.$http.get(`/agora/v1/appid`).then(res => {
			_this.appId = res.msg;
		});
	},
	onLoad() {
		// let _this = this;
		this.$http.post(`/treat/terminal/v1/user/info`).then(res => {
			this.relationPhone = res.relationPhone;
		});
		// this.callBtn()
		this.$http.post(`/treat/terminal/v1/treat/dep/list`).then(res => {
			this.depList = res.data;
		});
		this.$http.post(`/treat/web/v1/treat/dep/hospital`).then(res => {
			this.hospitalList = res.data;
			console.log('-------------------');
			console.log(this.hospitalList);
		});
	},
	onReady() {
		if (getApp().globalData.tagging == '0') {
			this.$refs.agoracom.getUserData();
			getApp().globalData.tagging = 1;
		}
	},
	methods: {
		// 通过id获取名字
		waitForList(e) {
			// console.log(e);
			// this.etcListIds.push(e);
			let datas = {
				id: e
			};
			this.$http.post(`/common/v1/channel/info?id=${e}`, datas).then(res => {
				console.log('*****************');
				console.log(res.data);
				console.log('*****************');
				// this.etcList.push(res.data);
				let singleData = {
					commonID: res.data.commonID,
					name: res.data.name,
					hospital: res.data.hospital,
					depart: res.data.depart,
					type: res.data.type,
					uid: res.data.uid
				};
				// 存储
				// let newlist = [1,2,3];
				// localStorage.setItem('recent', JSON.stringify(newlist))
				// let list = JSON.parse(localStorage.getItem('recent'))

				// return
				this.etcList.push(singleData);
				console.log(this.etcList);
			});
		},
		hujiao(type, hospitalID) {
			// uni.getStorageSync('uid'))
			// alert(uni.getStorageSync('uid'))
			console.log('hospitalID:  ' + hospitalID);
			this.$refs.agoracom.childMethod(type, hospitalID);
		},
		// hujiao(e,n) {
		// 	// e.preventDefault();
		// 	if (!this.rtm._logined) {
		// 		console.log('Please Login First');
		// 		return;
		// 	}
		// 	// 用户名房间号是写死的 没有
		// 	var msg = JSON.stringify({
		// 		sourceUid: this.uid,
		// 		destUid: this.destUid,
		// 		channelId: 'KUNYU001',
		// 		doAction: e
		// 	});

		// 	var params = {
		// 		appID: '9c3a9d03dac14f2cbcb2dcaa63d2a48a',
		// 		channel: 'KUNYU001',
		// 		uid: '1590796284',
		// 		channelMessage: msg
		// 		// {"sourceUid":"11111","destUid":"1590796284","channelId":"991","doAction":"1"}
		// 	};

		// 	console.log('-----------------');
		// 	console.log(this.rtm.channels);
		// 	// if (!this.rtm.channels[params.channel] || (this.rtm.channels[params.channel] && !this.rtm.channels[params.channel].joined)) {
		// 	// 	console.log('Please Join first');
		// 	// 	return false;
		// 	// }

		// 	console.log(this.rtm.channels);
		// 	this.rtm
		// 		.sendChannelMessage(params.channelMessage, params.channel)
		// 		.then(() => {
		// 			const view = ' text: account: ' + this.rtm.accountName + ' send : ' + params.channelMessage + ' channel: ' + params.channel;
		// 			console.log(view);
		// 			switch (e) {
		// 				case 2:
		// 					this.$refs.popup1.close();
		// 					break;
		// 				case 3:
		// 					this.$refs.popup1.close();
		// 					//  跳转视频页面
		// 					uni.navigateTo({
		// 						url:'./patientRecord'
		// 					})
		// 					break;
		// 				default:
		// 					break;
		// 			}
		// 		})
		// 		.catch(err => {
		// 			console.error(err);
		// 		});
		// },
		handleData() {},
		onClickItem(e) {
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex;
			}
		},
		changeSelect(type) {
			if (this.dType !== type) this.dType = type;
		},
		getDoctors(doctor) {
			this.$http.post(`/treat/terminal/v1/treat/dep/doctors?id=${doctor.id}`).then(res => {
				this.depList.forEach(item => {
					item.active = false;
				});
				doctor.active = true;
				this.doctorList = res.data;
			});
		},
		callBtn(e) {
			uni.navigateTo({
				url: `./patientRecord?id=${e}`
			});
			// let _this = this;
			// this.$refs.popup2.open()
			// // rtc object
			// _this.rtc = {
			//   client: null,
			//   joined: false,
			//   published: false,
			//   localStream: null,
			//   remoteStreams: [],
			//   params: {}
			// };

			// // Options for joining a channel
			// var option = {
			//   appID: "9c3a9d03dac14f2cbcb2dcaa63d2a48a",
			//   channel: "868",
			//   uid: 1234567,
			//   userRole: 1
			// }

			// // Create a client
			// _this.rtc.client = AgoraRTC.createClient({mode: "rtc", codec: "h264"});

			// // Initialize the client
			// _this.rtc.client.init(option.appID, function () {
			//   console.log("init success");
			//   }, (err) => {
			//   console.error(err);
			// });

			// // Join a channel
			// _this.rtc.client.join(option.token ? option.token : null, option.channel, option.uid ? +option.uid : null, function (uid) {
			//     console.log("join channel: " + option.channel + " success, uid: " + uid);
			//     _this.rtc.params.uid = uid;
			//   }, function(err) {
			//     console.error("client join failed", err)
			// })
			// 	// Create a local stream
			// 	_this.rtc.localStream = AgoraRTC.createStream({
			// 	  streamID: 'abc',
			// 	  audio: true,
			// 	  video: true,
			// 	  screen: false,
			// 	})
			// // Initialize the local stream
			// _this.rtc.localStream.init(function () {
			//   console.log("init local stream success");
			// // Publish the local stream
			// _this.rtc.client.publish(_this.rtc.localStream, function (err) {
			//   console.log("publish failed");
			//   console.error(err);
			// })
			//   // play stream with html element id "local_stream"
			//   _this.rtc.localStream.play("local_stream");
			// 	  _this.rtc.published = true;
			// }, function (err) {
			//   console.error("init local stream failed ", err);
			// });

			// _this.rtc.client.on("stream-added", function (evt) {

			//   var remoteStream = evt.stream;
			//   var id = remoteStream.getId();
			//   if (id !== _this.rtc.params.uid) {
			//     _this.rtc.client.subscribe(remoteStream, function (err) {
			//       console.log("stream subscribe failed", err);
			//     })
			//   }
			//   console.log('stream-added remote-uid: ', id);
			// });
			// _this.rtc.client.on("stream-subscribed", function (evt) {
			//   var remoteStream = evt.stream;
			//   var id = remoteStream.getId();
			//   // Add a view for the remote stream.
			// _this.rtc.remoteStreams.push(remoteStream)
			//   _this.addView(id);
			//   // Play the remote stream.
			//   remoteStream.play("remote_video_" + id);
			//   console.log('stream-subscribed remote-uid: ', id);
			// })
		},
		removeView(id) {
			if ($('#remote_video_panel_' + id)[0]) {
				$('#remote_video_panel_' + id).remove();
			}
		}
	}
};
</script>

<style lang="less" scoped>
page {
	background: #f5f6fa;
}
.consultation-list {
	.con-header {
		display: flex;
		justify-content: space-between;
		padding: 0 23.75px 0 45.91px;
		height: 63px;
		line-height: 63px;
		width: 100%;
		background: rgba(49, 131, 224, 1);
		color: #ffffff;
		font-size: 14px;
		box-sizing: border-box;
		.logout {
			display: inline-block;
			width: 99.75px;
			height: 30.08px;
			background: rgba(28, 112, 207, 1);
			border-radius: 15.83px;
			vertical-align: middle;
			line-height: 30.08px;
			text-align: center;
			font-size: 11.08px;
			font-weight: 600;
			margin-left: 47.5px;
			padding-left: 17.54px;
			box-sizing: border-box;
			&::before {
				content: '';
				position: absolute;
				background: url(../static/image/caozuo_zhuxiao_tuichudenglu@2x.png);
				width: 12.66px;
				height: 13.45px;
				background-size: 100% 100%;
				margin: 9.5px 0 0 -19px;
			}
		}
	}
	.con-content {
		background: #ffffff;
		width: 1200px;
		height: calc(100vh - 63px);
		margin: 0 auto;
		padding: 45px 50px;
		font-size: 17.41px;
		font-weight: 600;
		box-sizing: border-box;
		overflow: auto;
	}
	.consultation-list-title {
		// font-size:29.16px;
		// margin: 33.33px 0 35.41px 27.77px;
		display: block;
		overflow: hidden;
	}
	.consultation-list-box {
		// display: flex;
		// justify-content: space-between;
		float: left;
		background: url(../static/image/Group3@2x.png);
		background-size: 100% 100%;
		width: 220px;
		height: 137px;
		font-size: 16px;
		line-height: 16px;
		font-weight: 500;
		margin: 23.75px 0 0 48px;
		padding: 15.83px 19.79px 0;
		box-sizing: border-box;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		.add-con {
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-size: 14px;
			width: 97px !important;
			height: 28px;
			color: #ffffff;
			background: rgba(49, 131, 224, 1);
			border-radius: 19px;
			border: 1px solid rgba(124, 185, 255, 1);
			text-align: center;
			line-height: 28px;
			margin: 46px auto 0;
			font-weight: 500;
		}
		.add-con2 {
			box-sizing: border-box;
			width: 97px !important;
			height: 28px;
			background: rgba(255, 255, 255, 0);
			border-radius: 19px;
			border: 1px solid rgba(179, 215, 255, 1);
			font-size: 11.08px;
			color: #3183e0;
			text-align: center;
			line-height: 22.16px;
			margin: 46px auto 0;
		}
	}
	.remote-lists {
		margin-top: 20px;
	}
	.remote-list {
		padding-bottom: 20px;
		display: flex;
		flex-direction: row;
		flex-flow: wrap;
		margin-top: 20px;
	}
	.consultation-list-content {
		background: #f5f6fa;
		padding: 34.72px 0 34.72px 27.77px;
		.consultation-list-tags {
			display: flex;
			margin-bottom: 12.5px;
			.consultation-list-tag {
				width: 173.61px;
				height: 52.08px;
				line-height: 52.08px;
				border-radius: 25.69px;
				font-size: 25px;
				text-align: center;
				color: rgba(255, 255, 255, 1);
				background: rgba(174, 209, 248, 1);
				margin-right: 27.77px;
			}
			.active {
				background: rgba(49, 131, 224, 1);
			}
		}
		.doc-list {
			padding: 0 57.63px 0 53.47px;
			font-size: 25px;
			color: rgba(181, 181, 181, 1);
			line-height: 37.5px;
			.doc-list-title {
				margin: 43.75px 0 22.91px;
				font-size: 26.38px;
				color: rgba(168, 168, 168, 1);
			}
			.mt12:first-child {
				margin-top: 9.02px;
				.doc-list-title {
					margin-top: 0;
				}
			}
			.doc-item {
				display: flex;
				align-items: center;
				padding: 34.72px 0;
				border-bottom: 0.69px solid rgba(223, 229, 249, 1);
				.doc-avatar {
					width: 83.33px;
					height: 83.33px;
					margin-right: 27.77px;
				}
				.doc-box {
					width: 83.33px;
					height: 83.33px;
					margin-right: 27.77px;
					background: #7ebcc6;
					border-radius: 83.33px;
					font-size: 38.88px;
					color: rgba(255, 255, 255, 1);
					line-height: 83.33px;
					text-align: center;
				}
				.item-user {
					flex: 1;
					.item-user-name {
						font-size: 29.16px;
						color: rgba(51, 51, 51, 1);
						line-height: 43.75px;
					}
				}
				.item-call {
					display: flex;
					align-items: center;
					color: rgba(49, 131, 224, 1);
				}
				.phone-icon {
					width: 29.16px;
					height: 29.16px;
					margin-right: 16.66px;
				}
			}
		}
	}
}

.agora-theme .collapsible-header {
	border: none;
}

.agora-theme .btn-primary {
	color: #fff;
	background-color: #1e88e5 !important;
}

.agora-theme .agora-github-pin {
	background: url('')
		no-repeat round;
	width: 55px;
	height: 55px;
	position: absolute;
	right: 0;
}

.agora-theme .agora-primary-bg {
	color: #fff;
	background-color: #1e88e5 !important;
	align-items: center;
}

.agora-theme .card.container {
	margin-left: 20px;
}

.agora-theme h5 {
	margin: 0;
	margin-left: 20px;
}

.agora-theme nav {
	height: 55px;
}

.agora-theme .agora-secondary-border {
	border: 1px solid #424242 !important;
}

.agora-theme .agora-secondary-bg {
	color: #fff;
	background-color: #424242 !important;
	align-items: center;
}

.agora-theme .switch {
	height: 55px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.agora-theme .switch h6 {
	margin: 0;
}

.agora-theme #local_stream {
	position: relative;
}

.agora-theme #local_video_info {
	position: absolute;
}

.agora-theme .video-view {
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	position: fixed;
	right: 0;
	left: 0;
}

// .agora-theme .video-view {
//   width: 480px;
//   height: 320px; }
.agora-theme .video-placeholder {
	width: 480px;
	height: 320px;
}
.agora-theme #local_stream,
.agora-theme #local_video_info {
	width: 100%;
	height: 100%;
}

.agora-theme .video-profile {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	z-index: 2;
	color: #fff;
	opacity: 0.9;
	text-shadow: black 0.1em 0.1em 0.2em;
	font-size: 10px;
}

.agora-theme .video-grid {
	// display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(2, auto);
	grid-template-rows: auto;
}

.agora-theme .autoplay-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	display: block;
	cursor: pointer;
}
.agora-theme .autoplay-fallback::after {
	font-size: 1.5rem;
	opacity: 0.9;
	text-shadow: black 0.1em 0.1em 0.2em;
	display: block;
	color: #fff;
}

.popup-content {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	background-color: #fff;
	padding: 15px;
	font-size: 14px;
}

/* 提示窗口 */
.uni-tip {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: column;
	/* #endif */
	width: 300px;
	background-color: #fff;
	border-radius: 10px;
	width: 100%;
	height: 100%;
	background: rgba(39, 39, 39, 1);
}

.uni-tip-title {
	font-size: 59.04px;
	font-family: SourceHanSansCN-Regular, SourceHanSansCN;
	color: rgba(255, 255, 255, 1);
	line-height: 123px;

	margin-bottom: 10px;
	text-align: center;
	font-weight: bold;
	font-family: SourceHanSansCN-Regular, SourceHanSansCN;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	line-height: 123px;
	margin-top: 237.18px;
}

.uni-tip-content {
	font-size: 46.08px;
	font-family: SourceHanSansCN-Regular, SourceHanSansCN;
	color: rgba(255, 255, 255, 1);
	text-align: center;
}

.uni-tip-group-button {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: space-between;
	margin: 0 106.56px;
	image {
		width: 138px;
		height: 138.24px;
	}
}
.uni-tip-group-button2 {
	// /* #ifndef APP-NVUE */
	// display: flex;
	// /* #endif */
	// flex-direction: row;
	// justify-content: space-between;
	text-align: center;
	position: fixed;
	bottom: 216px;
	image {
		width: 108px;
		height: 108px;
	}
}

.uni-tip-button {
	flex: 1;
	text-align: center;
	font-size: 14px;
	color: #3b4144;
}

.uni-tip1 {
	background: url(../static/image/400091852@2x.png);
	width: 610.52px;
	height: 333.33px;
	font-size: 18.42px;
	color: #ffffff;
	padding: 61.4px;
	box-sizing: border-box;
	text-align: center;
	.uni-tip-title1 {
	}
	.uni-tip-group-button1 {
		display: flex;
		button {
			width: 132.45px;
			height: 37.71px;
			background: rgba(224, 58, 49, 1);
			border-radius: 48.24px;
			border: 1px solid rgba(250, 108, 108, 1);
			font-size: 14.03px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			margin-top: 42.1px;
			&:last-child {
				background: rgba(7, 206, 59, 1);
				border: 1px solid rgba(60, 246, 108, 1);
				margin-left: 54.38px;
			}
		}
	}
}
/* 插屏广告 */
.uni-image {
	position: relative;
}

.image {
	width: 200px;
	height: 200px;
}

.uni-image-close {
	margin-top: 20px;
	text-align: center;
}

/* 底部分享 */
.uni-share {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: column;
	/* #endif */
	background-color: #fff;
}

.uni-share-title {
	line-height: 60rpx;
	font-size: 24rpx;
	padding: 15rpx 0;
	text-align: center;
}

.uni-share-content {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	padding: 15px;
}

.uni-share-content-box {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	width: 200rpx;
}

.uni-share-content-image {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 60rpx;
	height: 60rpx;
	overflow: hidden;
	border-radius: 10rpx;
}

.content-image {
	width: 60rpx;
	height: 60rpx;
}

.uni-share-content-text {
	font-size: 26rpx;
	color: #333;
	padding-top: 5px;
	padding-bottom: 10px;
}

.uni-share-btn {
	height: 90rpx;
	line-height: 90rpx;
	font-size: 14px;
	border-top-color: #f5f5f5;
	border-top-width: 1px;
	border-top-style: solid;
	text-align: center;
	color: #666;
}
.remotec-list {
	width: 100%;
	height: auto;
	overflow: hidden;
}
uni-button {
	font-size: 14px;
}
</style>
